<template>
	<el-card>
		<el-form :inline="true">
			<el-form-item label="年度:">
				<el-date-picker v-model="queryParams.settingYear" type="year" format="YYYY" value-format="YYYY" style="width: 100%" />
			</el-form-item>

			<el-form-item>
				<el-button icon="Search" type="primary" @click="handleSearch">查询</el-button>
			</el-form-item>
			<el-form-item>
				<el-button icon="RefreshRight" @click="handleReset">重置</el-button>
			</el-form-item>
		</el-form>
	</el-card>
	<el-card>
		<div style="text-align: right; margin-bottom: 10px">
			<el-button type="primary" @click="handshow">新增</el-button>
		</div>
		<el-table
			v-loading="loading"
			:data="dataList"
			stripe
			element-loading-background="rgba(0, 0, 0, 0.5)"
			element-loading-text="加载中..."
			header-row-class-name="table-header"
		>
			<el-table-column type="index" label="序号" header-align="center" align="center" width="60"></el-table-column>
			<el-table-column label="设定年度" align="center" prop="settingYear" />
			<el-table-column label="编制类型" align="center" prop="preparationType">
				<template #default="scope">
					{{ scope.row.preparationType === '0' ? '新编' : '修订' }}
				</template>
			</el-table-column>
			<el-table-column label="限制名称" align="center" prop="remark" />
			<el-table-column label="截止时长(月)" align="center" prop="deadLineMonth"> </el-table-column>
			<el-table-column label="设定时间" align="center" prop="createTime">
				<template #default="scope">
					<span v-if="scope.row.createTime">{{ scope.row.createTime.slice(0, 10) }}</span>
				</template>
			</el-table-column>
			<el-table-column label="设定用户" align="center" prop="createBy"> </el-table-column>
			<el-table-column label="当前状态" align="center">
				<template #default="scope">
					{{ scope.row.iFlag === 0 ? '无效' : '有效' }}
				</template>
			</el-table-column>
			<el-table-column label="启用状态" align="center" prop="activeStatus">
				<template #default="scope">
					<el-tag :type="scope.row.activeStatus === 0 ? 'success' : 'danger'">{{ scope.row.activeStatus === 0 ? '启用' : '作废' }}</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="操作" fixed="right" header-align="center" align="center" width="80">
				<template #default="scope">
					<el-icon v-if="scope.row.activeStatus === 0" class="cursor" title="作废" :size="16" color="#fe6360" @click="handleDelete(scope.row)"
						><CircleClose
					/></el-icon>
				</template>
			</el-table-column>
		</el-table>

		<el-pagination
			:current-page="pageInfo.pageIndex"
			:page-size="pageInfo.pageSize"
			:total="pageInfo.total"
			layout="total, sizes, prev, pager, next, jumper"
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
		>
		</el-pagination>
	</el-card>

	<!-- 单个文件上传 -->
	<cmDialog v-model="showadd" modal-title="新增" width="40%">
		<el-form ref="addFormRef" :inline="true" :model="addForm" :rules="addRules">
			<el-form-item label="设置年度" prop="settingYear">
				<el-date-picker v-model="addForm.settingYear" type="year" format="YYYY" value-format="YYYY" />
			</el-form-item>
			<el-form-item prop="preparationType" label="标准编制类型">
				<el-radio-group v-model="addForm.preparationType">
					<el-radio label="0" size="small">新编</el-radio>
					<el-radio label="1" size="small">修订</el-radio>
				</el-radio-group>
			</el-form-item>
		</el-form>
		<el-table ref="timeTableRef" :data="setTimeList">
			<el-table-column prop="remark" label="编制阶段" align="center"> </el-table-column>
			<el-table-column prop="stageCode" label="编号" align="center"> </el-table-column>

			<el-table-column prop="deadLineMonth" label="设定完成时间距下发计划的时长(月)" align="center">
				<template #default="scope">
					<el-input v-model="scope.row.deadLineMonth" type="number" min="0" />
				</template>
			</el-table-column>

			<!-- v-if="scope.row.initiationTime && scope.row.deadlineMonth" -->
		</el-table>

		<div style="margin-left: 25px; margin-top: 10px">
			<div>设定用户:{{ userStore.user.username }}</div>
			<div style="margin-top: 6px">{{ time }}</div>
		</div>
		<div class="dialog-foot mt10">
			<el-button @click="showadd = false">取消</el-button>
			<el-button type="primary" @click="submitaddForm(addFormRef)">确认</el-button>
		</div>
	</cmDialog>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { min } from 'xe-utils'
import cmDialog from '@/components/cm-dialog/index.vue'
import { querylistApi, saveOrUpdateProgressApi, deleteProgressApi } from '@/api/system/deadlineTime'
import moment from 'moment'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useUserStore } from '@/store/modules/user'
const userStore = useUserStore()
const queryParams = ref({ settingYear: '', activeStatus: '', stageCode: '', remark: '', preparationType: '', settingType: 2 })
const defaultFilter = ref({ settingYear: '', activeStatus: '', stageCode: '', remark: '', preparationType: '', settingType: 2 })
const queryForm = ref()
const datatimelist = ref([])
const dataList = ref([])
const pageInfo = ref({ pageIndex: 1, pageSize: 10, total: 0 })
const loading = ref(false)
const showadd = ref(false)
const addFormRef = ref()
const time = moment().format('YYYY-MM-DD')
const addForm = ref({
	id: '',
	settingYear: '',
	activeStatus: 0,
	deadLineTime: '',
	deadLineMonth: null,
	deadLineDay: null,
	stageCode: 'StandardApply',
	remark: '标准编制截止时间',
	preparationType: '0',
	settingType: 2
})
const setTimeList = ref([
	{
		activeStatus: 0,
		deadLineTime: '',
		deadLineMonth: null,
		deadLineDay: null,
		stageCode: 'Preparation',
		remark: '大纲编制截止时间',
		preparationType: '',
		settingType: 2
	},
	{
		activeStatus: 0,
		deadLineTime: '',
		deadLineMonth: null,
		deadLineDay: null,
		stageCode: 'SolicitOpinions',
		remark: '征求意见截止时间',
		preparationType: '',
		settingType: 2
	},
	{
		activeStatus: 0,
		deadLineTime: '',
		deadLineMonth: null,
		deadLineDay: null,
		stageCode: 'SubmitApproval',
		remark: '送审截止时间',
		preparationType: '',
		settingType: 2
	},
	{
		activeStatus: 0,
		deadLineTime: '',
		deadLineMonth: null,
		deadLineDay: null,
		stageCode: 'ApprovalApplication',
		remark: '报批截止时间',
		preparationType: '',
		settingType: 2
	}
])
const addRules = ref({
	settingYear: [{ required: true, message: '请选择申报年度', trigger: 'change' }],
	deadLineTime: [{ required: true, message: '请选择截止日期', trigger: 'change' }],
	preparationType: [{ required: true, message: '请输入截止日期', trigger: 'change' }]
})
const handleSearch = () => {
	getDataList()
}

const handleReset = () => {
	queryParams.value = { ...defaultFilter.value }
	pageInfo.value.pageIndex = 1
	dataList.value = []
	getDataList()
}
onMounted(() => {
	getDataList()
})

const handshow = () => {
	const aa = {
		id: '',
		settingYear: '',
		activeStatus: 0,
		deadLineTime: '',
		deadLineMonth: null,
		deadLineDay: null,
		stageCode: 'StandardApply',
		remark: '标准编制截止时间',
		preparationType: '0',
		settingType: 2
	}

	addForm.value = aa
	showadd.value = true
}
const getDataList = () => {
	loading.value = true

	const data = { ...queryParams.value, pageIndex: pageInfo.value.pageIndex, pageSize: pageInfo.value.pageSize }

	querylistApi(data).then(res => {
		loading.value = false
		dataList.value = res.data.list || []
		pageInfo.value.total = res.data.total || 0
	})
}

// const handlePaginationChange = ({ page, size }: { page: number; size: number }) => {
//   pageInfo.value.page = page;
//   pageInfo.value.limit = size;
//   list.value = [];
//   getuser_list();
// };
const handleSizeChange = (val: number) => {
	pageInfo.value.pageSize = val
	dataList.value = []
	getDataList()
}
const handleCurrentChange = (val: number) => {
	pageInfo.value.pageIndex = val
	dataList.value = []
	getDataList()
}

const submitaddForm = async (formRef: FormInstance) => {
	if (!formRef) {
		return
	}

	await formRef.validate((valid, fields) => {
		if (valid) {
			const table = setTimeList.value.map(item => {
				return {
					...item,
					preparationType: addForm.value.preparationType
				}
			})

			console.log(table, 'sgsg')
			let hasEmpty = false
			const fieldsToCheck = ['deadLineMonth']
			table.forEach((item, index) => {
				fieldsToCheck.forEach(field => {
					if (item[field] === '' || item[field] === null || item[field] === undefined) {
						hasEmpty = true
						ElMessage.warning(`第 ${index + 1} 条数据的时长不能为空！`)
					}
				})
			})
			if (!hasEmpty) {
				const data = {
					year: addForm.value.settingYear,
					settingList: table
				}
				saveOrUpdateProgressApi(data).then(() => {
					ElMessage({
						type: 'success',
						message: '操作成功'
					})
					showadd.value = false
					getDataList()
				})
			}
		} else {
			if (!fields) {
				return
			}
		}
	})
}

const handleDelete = (row: any) => {
	ElMessageBox.confirm('是否确认作废?', '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning'
	}).then(() => {
		console.log(row, 'row')
		deleteProgressApi({
			settingYear: row.settingYear, // 年份
			settingType: 2,
			preparationType: row.preparationType
		}).then(() => {
			ElMessage({
				type: 'success',
				message: '操作成功'
			})
			getDataList()
		})
	})
}
</script>

<style lang="scss" scoped>
.dialog-foot {
	display: inline-block;
	width: 100%;
	text-align: center;
}
</style>
